<script setup lang="ts">
import { ref } from 'vue'

const statistics = ref([
  { title: '总用户数', value: '1,234', icon: 'user', color: '#409EFF' },
  { title: '今日活跃', value: '423', icon: 'data-line', color: '#67C23A' },
  { title: '系统消息', value: '12', icon: 'message', color: '#E6A23C' },
  { title: '待处理事项', value: '3', icon: 'bell', color: '#F56C6C' },
])
</script>

<template>
  <div class="dashboard">
    <h2 class="dashboard-title">仪表盘</h2>
    
    <!-- 统计卡片 -->
    <div class="statistics-grid">
      <el-card v-for="item in statistics" :key="item.title" class="statistic-card" shadow="hover">
        <div class="statistic-content">
          <div class="statistic-info">
            <h3 class="statistic-title">{{ item.title }}</h3>
            <p class="statistic-value">{{ item.value }}</p>
          </div>
          <el-icon :style="{ color: item.color, fontSize: '48px', opacity: 0.8 }">
            <component :is="item.icon" />
          </el-icon>
        </div>
      </el-card>
    </div>

    <!-- 图表区域 -->
    <div class="charts-container">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>访问统计</span>
                <el-button-group>
                  <el-button size="small">周</el-button>
                  <el-button size="small" type="primary">月</el-button>
                  <el-button size="small">年</el-button>
                </el-button-group>
              </div>
            </template>
            <div class="chart-placeholder">图表区域</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>用户分布</span>
              </div>
            </template>
            <div class="chart-placeholder">饼图区域</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped>
.dashboard {
  padding: 20px;
}

.dashboard-title {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 500;
  color: #1f2f3d;
}

.statistics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.statistic-card {
  height: 120px;
}

.statistic-content {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.statistic-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.statistic-title {
  margin: 0;
  font-size: 16px;
  color: #909399;
}

.statistic-value {
  margin: 0;
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}

.charts-container {
  margin-top: 24px;
}

.chart-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 14px;
}
</style>